<template>
  <a-row :gutter="16">
    <a-col v-bind="{ xs: 24, sm: 24, md: 10, lg: 9, xl: 6, xxl: 5 }" >
      <div class="left_photo_box">
        <a-avatar :src="userPhoto" :size="145" shape="square" class="user_avatar" />
        <template v-if="userInfo.length">
          <div v-for="item in userInfo" :key="item.key" class="info_item">
            <label>{{item.label}}</label>
            <span>{{item.value}}</span>
          </div>
        </template>
      </div>
      <div class="shortcut_wrap">
        <h3 class="block_title">快捷入口</h3>
        <a-row>
          <a-col :span="8" v-for="shortcut in shortcutList" :key="shortcut.path" class="shortcut_item">
            <img :src="require('../assets/imgs/'+shortcut.bg+'.png')" alt="">
            <span>{{shortcut.label}}</span>
          </a-col>
        </a-row>
      </div>
    </a-col>
    <a-col v-bind="{ xs: 24, sm: 24, md: 14, lg: 15, xl: 6, xxl: 7 }">
      <div class="center_block">
        <div class="block_title">
          <span>日程待办</span>
          <a-button type="link" class="padding0">全部日程</a-button>
        </div>
        <a-calendar :fullscreen="false" :header-render="headerRender" @panelChange="onPanelChange" @change="changeDate" />
        <ul class="sche_box">
          <li v-for="sche in scheduleList" :key="sche.id"><span class="sche_type" :class="'sche_type_'+sche.type"></span>{{sche.title}}</li>
        </ul>
      </div>
      <div class="center_block">
        <div class="block_title">
          <span>本周期考勤</span>
          <a-button type="link" class="padding0">考勤记录</a-button>
        </div>
        <div class="punch_box">
          <div class="top">
            <div class="item">
              <p><span class="num">{{punchInfo.normal}}</span>次</p>
              <span class="label">正常打卡</span>
            </div>
            <div class="item">
              <p><span class="num">{{punchInfo.abnormal}}</span>次</p>
              <span class="label">异常打卡</span>
            </div>
          </div>
          <div class="bottom">
            <span>迟到：{{punchInfo.late}}次</span>
            <span>早退：{{punchInfo.leave}}次</span>
            <span>缺卡：{{punchInfo.forget}}次</span>
          </div>
        </div>
      </div>
    </a-col>
    <a-col v-bind="{ xs: 24, sm: 24, md: 24, lg: 24, xl: 12, xxl: 12 }">
      <div class="todo_block">
        <div class="block_title">
          <span>待办事宜</span>
          <a-button type="link" class="padding0">全部待办</a-button>
        </div>
        <ul class="todo_box">
          <li v-for="(todo, todoIndex) in todoList" :key="todo.id">{{todoIndex+1}}、{{todo.title}}</li>
        </ul>
      </div>
      <div class="table_contact_box">
        <h3 class="block_title">各项事务联系人</h3>
        <a-table :dataSource="contactList" :columns="contactColumns" rowKey="id" size="small" :pagination="false"></a-table>
      </div>
    </a-col>
  </a-row>
</template>

<script>
import moment from 'moment'
export default {
  /* 读数据，返回给组件 */
  async asyncData({$axios}) {
    const { result } = await $axios.get('/api/home/userinfo')
    let _userInfo = [
      {label: '姓名：', key: 'name', value: ''},
      {label: '部门：', key: 'apartment', value: ''},
      {label: '岗位级别：', key: 'level', value: ''},
      {label: '名片岗位：', key: 'business', value: ''},
      {label: '直接上级：', key: 'supervisor', value: ''},
      {label: '入职日期：', key: 'start', value: ''}
    ]
    for(let key in result.user_info) {
      const _idx = _userInfo.findIndex(item => item.key === key)
      _userInfo[_idx].value = result.user_info[key]
    }
    return {
      userPhoto: result.user_photo,
      userInfo: _userInfo,
      punchInfo: result.punch_info,
      todoList: result.todo_list,
      contactList: result.contact_list
    }
  },
  data() {
    return {
      shortcutList: [
        {label: '我的资产', path: '/a', bg: 'shortcut_1'},
        {label: '会议室预定', path: '/b', bg: 'shortcut_2'},
        {label: '流程申请', path: '/c', bg: 'shortcut_3'},
        {label: '审批中流程', path: '/d', bg: 'shortcut_4'},
        {label: '我的照片', path: '/e', bg: 'shortcut_5'},
        {label: '我的有薪年假', path: '/f', bg: 'shortcut_6'},
        {label: '文件下载', path: '/g', bg: 'shortcut_7'},
        {label: '绩效', path: '/h', bg: 'shortcut_8'},
        {label: '新闻', path: '/i', bg: 'shortcut_9'},
        {label: '社保公积金', path: '/j', bg: 'shortcut_10'},
        {label: '公告', path: '/k', bg: 'shortcut_11'},
        {label: '认证', path: '/l', bg: 'shortcut_12'},
        {label: '日历', path: '/m', bg: 'shortcut_13'},
        {label: '奖惩记录', path: '/n', bg: 'shortcut_14'},
      ],
      contactColumns: [
        {title: '分类', dataIndex: 'type', width: 60},
        {title: '负责事项', dataIndex: 'event', ellipsis: true},
        {title: '联系人', dataIndex: 'person'},
        {title: '邮箱', dataIndex: 'email'},
        {title: '联系电话', dataIndex: 'phone'}
      ],
      scheduleList: [],
      scheduleDate: moment().format('YYYY-MM-DD'),
    }
  },
  mounted() {
    this.getScheduleList()
  },
  methods: {
    getScheduleList() {
      this.$axios.get('/api/home/schedule', {date: this.scheduleDate}).then(({code, result}) => {
        if(code === 200) {
          this.scheduleList = result
        }
      })
    },
    headerRender({value, type, onChange, onTypeChange}) {
      const start = 0
      const end = 12
      const monthOptions = []

      const current = value.clone()
      const localeData = value.localeData()
      const months = []
      for (let i = 0; i < 12; i++) {
        current.month(i)
        months.push(localeData.monthsShort(current))
      }

      for (let index = start; index < end; index++) {
        monthOptions.push(<a-select-option key={`${index}`}>{months[index]}</a-select-option>)
      }
      const month = value.month()

      const year = value.year()
      const options = []
      for (let i = year - 10; i < year + 10; i += 1) {
        options.push(<a-select-option key={i} value={i} class="year-item">{i}</a-select-option>)
      }
      return (
        <div style={{ paddingBottom: '12px' }}>
          <a-row type="flex" justify="space-between">
            <a-col>
              <a-select
                size="small"
                dropdownMatchSelectWidth={false}
                onChange={newYear => {
                  const now = value.clone().year(newYear)
                  onChange(now)
                }}
                value={String(year)}>
                {options}
              </a-select>
            </a-col>
            <a-col>
              <a-select
                size="small"
                dropdownMatchSelectWidth={false}
                value={String(month)}
                onChange={selectedMonth => {
                  const newValue = value.clone()
                  newValue.month(parseInt(selectedMonth, 10))
                  onChange(newValue)
                }}>
                {monthOptions}
              </a-select>
            </a-col>
          </a-row>
        </div>
      )
    },
    onPanelChange(date) {
      this.scheduleDate = moment(date).format('YYYY-MM-DD')
      this.getScheduleList()
    },
    changeDate(date) {
      this.scheduleDate = moment(date).format('YYYY-MM-DD')
      this.getScheduleList()
    }
  }
}
</script>

<style lang="less" scoped>
.left_photo_box{
  padding: 16px;
  background-color: @primary-color;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  .user_avatar{
    margin-bottom: 12px;
  }
  .info_item{
    width: 200px;
    color: rgba(255, 255, 255, 0.65);
    label{
      color: rgba(255, 255, 255, 0.85);
      display: inline-block;
      width: 70px;
      text-align: right;
    }
    &:not(:last-child){
      margin-bottom: 8px;
    }
  }
}
.block_title{
  font-weight: bold;
  color: rgba(0, 0, 0, 0.75);
  position: relative;
  margin-bottom: 24px;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  &::before{
    content: '';
    position: absolute;
    width: 2px;
    height: 18px;
    background-color: @primary-color;
    left: -16px;
    top: 3px;
  }
}
.shortcut_wrap{
  padding: 16px 16px 0 16px;
  background-color: #fff;
  margin-top: 16px;
  .shortcut_item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
    cursor: pointer;
    &:hover{
      span{
        color: @primary-color;
      }
    }
    img{
      width: 40px;
      height: auto;
      border-radius: 8px;
    }
    span{
      font-size: 12px;
      margin-top: 6px;
    }
  }
}
.todo_box{
  li{
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.punch_box{
  .top{
    border-bottom: 1px solid #efefef;
    display: flex;
    justify-content: space-around;
    padding-bottom: 16px;
    .item{
      display: flex;
      flex-direction: column;
      align-items: center;
      .num{
        font-size: 20px;
        font-weight: 700;
        margin-right: 2px;
        color: #333;
      }
      .label{
        color: #999;
        font-size: 12px;
      }
    }
  }
  .bottom{
    display: flex;
    justify-content: space-around;
    padding-top: 12px;
    color: #333;
  }
}
.todo_block{
  background-color: #fff;
  padding: 16px;
  margin-bottom: 16px;
}
.center_block{
  padding: 16px;
  background-color: #fff;
  margin-bottom: 16px;
}
.table_contact_box{
  padding: 16px;
  background-color: #fff;
}
.sche_box{
  margin: 0;
  padding-left: 32px;
  li{
    height: 30px;
    line-height: 30px;
    display: flex;
    align-items: center;
    .sche_type{
      width: 12px;
      height: 12px;
      border-radius: 2px;
      margin-right: 6px;
    }
    .sche_type_1{
      background-color: #3dd4a7;
    }
    .sche_type_2{
      background-color: #fa746b;
    }
    .sche_type_3{
      background-color: #fddb78;
    }
  }
}
</style>
  